<template>
	<view>
		<modal v-if="show" title="收款" confirm-text="确定" cancel-text="取消" @cancel="cancelPop" @confirm="confirmPop">
			<input v-model="money" type='number' placeholder="请确认收款金额" />
		</modal>
		<!-- 衣服列表 -->
		<view class="">

			<view class="item">
				<view class="content">

					<view class="son">
						{{customer.name}}
					</view>

					<view class="detail">

						<view class="info">
							{{customer.linkman}}
						</view>

						<view class="info">
							{{customer.phone}}
						</view>
					</view>

					<view class="detail">

						<view class="info">
							应收款:{{pay}}
						</view>

						<view class="info">
							已收款:{{repay}}
						</view>
					</view>

					<view class="bottom-buttons">
						<view @click="del()" class="button-tag">
							删除
						</view>
						<view @click="edit()" class="button-tag">
							修改
						</view>
					</view>

				</view>
			</view>
		</view>

		<u-divider text="订单列表"></u-divider>
		<!-- 	
		<view class="bt">
			<u-button type="primary" @click="add">添加客户</u-button>
		</view> -->

		<view class="item" v-for="(item1, index1) in orderList" :key="index1">
			<view class="items">
				<view class="" style="display: flex;justify-content: space-between;padding: 40rpx;">
					<view style="margin: 10rpx;">交货时间 {{item1.salesTime}}</view>
					<view class="">
						应收款:{{item1.receivableAmount}}
					</view>
					<view class="">
						已收款:{{item1.paidAmount}}
					</view>
					<view class="">
						<u-button @click="payfor(item1)" v-if="item1.paidAmount<item1.receivableAmount" color="#005DFF" type="mini" text="收款"></u-button>
					</view>
				</view>
				
				<view class="" style="display: flex;justify-content: space-around;">
					<view style="margin: 10rpx;">款式名称:{{item1.clothes.clothesName}}</view>
					<view style="margin: 10rpx;">编号:{{item1.clothes.clothesEncode}}</view>
				</view>
				
					<view class="u-content" style="margin-top: 20rpx;">
						<u-parse :content="item1.html" :tagStyle="style"></u-parse>
					</view>

<!-- 				<view class="u-page">
					<view v-for="(item2, index2) in item1.salesItemList" :key="index2">

						<view class="" style="display: flex;justify-content: space-around;">

							<view style="margin: 10rpx;">颜色: {{item2.colorName}}</view>
							<view style="margin: 10rpx;">尺码:{{item2.sizeName}}</view>
							<view style="margin: 10rpx;">数量 {{item2.num}}</view>

						</view>
					</view>
				</view> -->
			</view>


		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			
				pay: 0,
				repay: 0,
				sales: {},
				money: "",
				show: false,
				id: "",
				customer: {},
				orderList: []
			}
		},
		methods: {
			edit() {
				uni.navigateTo({
					url: "/pages/newcustomer/newcustomer?id="+this.id
				})
			},
			del() {
				var that = this
				uni.showModal({
					title: '警告',
					content: '是否确认删除',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							that.api.get("/customer/delCustomer/" + that.id, {}).then(res => {
								console.log(res);
								that.$refs.uToast.show({
									
									type: 'default',
									title: '提示',
									message: res.mes,
									iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
								})
								uni.navigateBack();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//弹窗
			confirmPop() { //确认
				console.log('点击了确定')
				this.show = false
				var that = this
				this.api.post("/customer/payFor/", {
					id: that.sales.id,
					paidAmount: that.money
				}).then(res => {
					that.money = ""
					console.log(res);
					that.$refs.uToast.show({
						duration:1000,
						type: 'success',
						title: '提示',
						message: "操作成功",
					})
					that.getOrder()
				})


			},
			cancelPop() { //取消
				console.log('点击了取消')
				this.show = false
			},
			payfor(item) {
				this.show = true
				this.sales = item
			},
			add() {
				uni.navigateTo({
					url: "/pages/newcustomer/newcustomer"
				})
			},
			create(id, name) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/neworder/neworder?id=" + id + "&name=" + name
				})
			},
			bf(id, name) {
				console.log(id)
				uni.navigateTo({
					url: "/pages/generate/generate?id=" + id + "&name=" + name
				})
			},
			getOrder() {
				var that = this
				this.api.get("/customer/myCustomerOrder/" + this.id, {}).then(res => {
					this.orderList = res.data
					
					console.log(res.data);
					var shouldpay = 0
					var recpay = 0
					res.data.forEach(item => {
						shouldpay = shouldpay + item.receivableAmount
						recpay = recpay + item.paidAmount
					})
					that.repay = recpay
					that.pay = shouldpay

				})
			}
		},
		onLoad: function(options) {
			var that = this
			this.id = options.id
			this.api.post("/customer/myCustomerDetail/", {
				id: options.id
			}).then(res => {
				that.customer = res.data[0]
				that.getOrder()
				console.log(res);
			})





		},

	}
</script>

<style lang="scss" scoped>
	.bottom-buttons {
		margin-top: 10rpx;
		display: flex;
		justify-content: right;
		align-items: center;

	}

	.button-tag {
		margin-left: 40rpx;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		border-radius: 15px;
		color: #A5A5A5;
		border: 1px solid #EDEDED;
	}

	.items {

		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
	}

	.detail {
		display: flex;
	}

	.top {
		height: 50px;
		background-color: #e2e4ee;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 15rpx;
	}

	.son {
		margin: 20rpx;
	}

	.info {
		margin: 20rpx;
	}



	.bt {
		width: 90%;
		margin: 20rpx auto;
	}
</style>
